import React, { useState } from 'react';
import { IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonButton, IonToggle, IonNote, IonInput } from '@ionic/react';
import { useOllama } from '../../hooks/useOllama';
import { useTranslation } from 'react-i18next';

interface RegistryConfig {
  model: string;
  insecure: boolean;
  customName: string;
}

const ModelRegistry: React.FC = () => {
  const { models, isLoading, error, pullModel, pushModel } = useOllama();
  const { t } = useTranslation();
  const [config, setConfig] = useState<RegistryConfig>({
    model: '',
    insecure: false,
    customName: ''
  });

  const handleConfigChange = (key: keyof RegistryConfig, value: any) => {
    setConfig(prev => ({ ...prev, [key]: value }));
  };

  const handlePullModel = async () => {
    try {
      await pullModel(config.model);
    } catch (error) {
      console.error('Failed to pull model:', error);
    }
  };

  const handlePushModel = async () => {
    try {
      await pushModel(config.model);
    } catch (error) {
      console.error('Failed to push model:', error);
    }
  };

  return (
    <IonCard>
      <IonCardHeader>
        <IonCardTitle>{t('models.registry.title')}</IonCardTitle>
      </IonCardHeader>
      <IonCardContent>
        <div className="space-y-4">
          {/* Registry Configuration */}
          <div className="space-y-2">
            <IonItem>
              <IonLabel position="stacked">{t('models.fields.name')}</IonLabel>
              <IonSelect
                value={config.model}
                onIonChange={e => handleConfigChange('model', e.detail.value)}
              >
                {models.map(model => (
                  <IonSelectOption key={model.name} value={model.name}>
                    {model.name}
                  </IonSelectOption>
                ))}
              </IonSelect>
            </IonItem>

            <IonItem>
              <IonLabel position="stacked">{t('models.registry.customName')}</IonLabel>
              <IonInput
                value={config.customName}
                onIonChange={e => handleConfigChange('customName', e.detail.value!)}
                placeholder={t('models.registry.customNamePlaceholder')}
              />
            </IonItem>

            <IonItem>
              <IonLabel position="stacked">{t('models.registry.insecure')}</IonLabel>
              <IonToggle
                checked={config.insecure}
                onIonChange={e => handleConfigChange('insecure', e.detail.checked)}
              />
              <IonNote>{t('common.enabled')}</IonNote>
            </IonItem>
          </div>

          {/* Error Display */}
          {error && (
            <div className="alert alert-error">
              <span>{error}</span>
            </div>
          )}

          {/* Action Buttons */}
          <div className="flex justify-end gap-2">
            <IonButton
              onClick={handlePullModel}
              disabled={isLoading || !config.model}
              color="primary"
            >
              {isLoading ? t('models.registry.pulling') : t('models.registry.pull')}
            </IonButton>
            <IonButton
              onClick={handlePushModel}
              disabled={isLoading || !config.model}
              color="secondary"
            >
              {isLoading ? t('models.registry.pushing') : t('models.registry.push')}
            </IonButton>
          </div>

          {/* Help/Info Section */}
          <div className="mt-4 p-4 bg-base-200 rounded-lg">
            <h3 className="text-lg font-semibold mb-2">{t('models.registry.help.title')}</h3>
            <p className="text-sm">
              {t('models.registry.help.description')}
            </p>
            <ul className="list-disc pl-6 mt-2 text-sm">
              <li>{t('models.registry.help.items.pull')}</li>
              <li>{t('models.registry.help.items.push')}</li>
              <li>{t('models.registry.help.items.insecure')}</li>
            </ul>
          </div>
        </div>
      </IonCardContent>
    </IonCard>
  );
};

export default ModelRegistry; 